<html>
<head>
	<title>芭蕉花管理平台-红包记录</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<style type="text/css">
		.search-box.condition-hidden .search-condition {display: none;}
		.btn {appearance: none; -moz-appearance: none; -webkit-appearance: none;}
		.list-item {padding-top: .5rem; border-bottom: 1px solid rgba(0,0,0,.125);}
		.list-item .user-name {color: #666; font-size: .875rem;}
		.list-item .user-mobile {display: inline-block; color: #666; font-size: .875rem;}
		.list-item .money {display: inline-block; text-align: right; float: right; font-weight: bold;}
		.list-item .time {font-size: .6rem; color: #aaa; text-align: right;}
		#dataInfo {margin-top: .5rem; font-size: .6rem; color: #777; text-align: right;}
		#pageList {margin-top: 1.25rem;}
		#pageList nav {display: inline-block;}
		#pageList .page-link:hover {z-index: 2; color: #007bff; text-decoration: none; background-color: #fff; border-color: #dee2e6;}
		#pageList .page-link:active {z-index: 2; color: #0056b3; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6;}
		#pageList .page-link:focus {box-shadow: none;}
	</style>
</head>
<body>
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#" onclick="goMenu();return false;"><i class="fa fa-chevron-left"></i><span style="padding-left: 10px;">菜单</span></a></li>
				<li class="breadcrumb-item active" aria-current="page">红包记录</li>
			</ol>
		</nav>
		<div class="row collapse" id="searchBox">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<select class="form-control" id="searchType">
						<option value="0">全民红包</option>
						<option value="1">大转盘红包</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<input type="text" id="searchKey" class="form-control" placeholder="输入用户账号/手机号/红包名搜索"/>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="search();"  class="btn btn-block btn-primary">搜索</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-12">
				<div class="form-group">
					<a type="button" id="searchBoxCollapse" class="btn btn-block btn-light" data-toggle="collapse" data-target="#searchBox" aria-expanded="false" aria-controls="searchBox"><span style="padding-right: 1rem; font-size: 0.875rem; color: #999;">搜索条件</span><i class="fa fa-angle-double-down text-primary" aria-hidden="true"></i> <i class="fa fa-angle-double-up text-primary" aria-hidden="true"></i></a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="showRestRedbag()"  class="btn btn-block btn-info">重置红包位置</button>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="showAddRedbagMoney()"  class="btn btn-block btn-info">红包池充值</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-12">
				<div class="form-group">
					<span>总次数：</span><span id="totalCount" class="text-danger"></span><span>  </span><span>总合计：</span><span id="totalMoney" class="text-danger"></span>
				</div>
			</div>
		</div>
		
		<div id="redbagList">
		</div>
		<div id="dataInfo">
		</div>
		
		<div class="row" id="pageList" style="display: none;">
			<div class="col-xl-12 text-center">
				<nav aria-label="...">
					<ul class="pagination">
						<li class="page-item previous disabled">
							<a class="page-link" href="#" onclick="goPrevious();return false;">上一页</a>
						</li>
						<li class="page-item next disabled">
							<a class="page-link" href="#" onclick="goNext();return false;">下一页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

<!-- 【编辑】弹出窗内容 -->
<div class="modal fade" id="addPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="addTitle">向红包池充值</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="addForm">
					<input type="hidden" id="id" name="id">
					<div class="form-group" >
						<label for="name" style="color: red;">*充值金额：</label>
						<input class="form-control" type="number" name="addMoney" id="addMoney">
					</div>
				</form>
			</div>
			<div class="modal-footer" style="display: block; text-align: center">
				<button type="button" class="btn btn-light" style="width: 40%; max-width: 10rem;" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-info" style="width: 40%; max-width: 10rem;" onclick="confirmAdd();">确定</button>
			</div>
		</div>
	</div>
</div>

<!-- page script -->
<script>
	var maxCount = 10;
	var totalPages = 0;
	var page = 1;
	var searchClick = false;

	// 取得通过html传递的参数
	var paramSearchType = getHtmlParams("searchType");
	if (paramSearchType != null) {
		$("#searchType").val(paramSearchType);
	}
	// 取后清空
	clearHtmlParams();

	$(document).ready(function() {
		//加载数据
		getData();
	});

	function goMenu() {
		getHtml('/mobile/menu.html');
	}

	function search() {
		searchClick = true;
		totalPages = 0;
		page = 1;
		getData();
	}
	
	function goPrevious() {
		if (page > 1) {
			page = page - 1;
			getData();
		}
	}
	
	function goNext() {
		if (page < totalPages) {
			page = page + 1;
			getData();
		}
	}

	// 加载数据
	function getData(){
		getToalData();
		let searchType = $("#searchType").val();
		let searchKey = $("#searchKey").val();
		var startIndex = (page - 1) * maxCount;

		let url = "/dataStatist/getRedPagDetailList";
		let params = {
				"type" : searchType,
				"key" : searchKey,
				"start" : startIndex,
				"length" : maxCount,
				"draw" : page
		};
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				var dataList = data.data;
				var totalCount = data.recordsTotal;
				if ((totalCount % maxCount) > 0) {
					totalPages = parseInt(totalCount / maxCount) + 1;
				} else {
					totalPages = parseInt(totalCount / maxCount);
				}
				if (page <= 1) {
					$("#pageList .previous").addClass("disabled");
				} else {
					$("#pageList .previous").removeClass("disabled");
				}
				if (page >= totalPages) {
					$("#pageList .next").addClass("disabled");
				} else {
					$("#pageList .next").removeClass("disabled");
				}
				if (totalPages <= 1) {
					$("#pageList").hide();
				} else {
					$("#pageList").show();
				}

				var dataHtml = '';
				for (let i = 0; i < dataList.length; i++) {
					let dataRecord = dataList[i];
					if (i == 0) {
						dataHtml += '<div class="list-item" style="border-top: 1px solid rgba(0,0,0,.125);">';
					} else {
						dataHtml += '<div class="list-item">';
					}
					dataHtml += '<div class="user-name">' + dataRecord.username + '</div>';
					dataHtml += '<div>';
					dataHtml += '<div class="user-mobile">' + dataRecord.mobile + '</div>';
					dataHtml += '<div class="money">' + dataRecord.money + '</div>';
					dataHtml += '</div>';
					dataHtml += '<div class="time">' + dataRecord.createTime + '</div>';
					dataHtml += '</div>';
				}
				$("#redbagList").html(dataHtml);
				if (totalCount > 0) {
					let startNum = startIndex + 1;
					let endNum = startIndex + dataList.length;
					$("#dataInfo").html('从 ' + startNum + ' 到 ' + endNum + ' /共 ' + totalCount + ' 条数据');
					if (searchClick) {
						$("#searchBoxCollapse").click();
					}
				} else {
					$("#dataInfo").html('没有检索到数据');
				}
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
			searchClick = false;
		}, true);
	}

	function  getToalData(){
		let searchType = $("#searchType").val();
		let searchKey = $("#searchKey").val();
		let url = "/dataStatist/getRedPagDetailTotal";
		let params = {
				"type" : searchType,
				"key" : searchKey
		};
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				$("#totalCount").html(data.count);
				$("#totalMoney").html(data.totalMoney.toFixed(2));
			}
		}, true);
	}

	function showRestRedbag() {
		showConfirmBox("确定要重置红包分布吗？", function(result) {
			if (result == "yes") {
				let url = "/sysconfig/newRedPageSeat";
				let params = {};
				getMapData(url, params, function(data, result) {
					if (result == "success") {
					}
				}, true, true);
			}
		});
	}

	function showAddRedbagMoney() {
		$("#addMoney").val("");
		$("#addPanel").modal("show");
	}

	function confirmAdd() {
		let addMoney = $("#addMoney").val();
		if( $.trim(addMoney)  == ""){
			showErrorMessageTip("充值金额不能为空！", "addMoney");
			return ;
		}
		let reg = /^([1-9]\d{0,6}|0)(\.\d{1,2})?$/;
		if (!reg.test(addMoney)) {
			showErrorMessageTip("充值金额填写不正确！(注：最小0.01元，最大9999999.99元)", "addMoney");
			return ;
		}
		let url = "/sysconfig/setRedPageMoney";
		let params = {
				"uid" : 0,
				"totalMoney" : addMoney
		};
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				$("#addPanel").modal("hide");
			}
		}, true, true);
	}

</script>
</body>
</html>
